<template>
      <div class="investor-area clr-black">
            <Header :isTransparentBackground="false"></Header>
            <div class="pt-gap-comm investor-main-box">
                  <!-- banner 及 辅助导航栏 开始 -->
                  <PageBanner pictureLink="https://www.tencent.com/img/banners/investor-1.jpg" :dataIndex="4"
                        major-heading="连接投资者" auxiliary-title="开诚务实，为投资者创造长远价值"></PageBanner>
                  <!-- banner 及 辅助导航栏 结束 -->

                  <template v-for="(investorItem, investorIndex) in headerList[4].subList" :key="investorIndex">
                        <component :id="investorItem.anchor_point" :is="data.componentList[investorIndex].componentName" 
                        :moduleTitle="investorItem.sub_text"></component>
                  </template>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { headerList } from '@/config/assets.config'
// 导航栏组件
import Header from '@/components/client/common/header/index.vue';
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue';
import PageBanner from '@/components/client/common/pageBanner/index.vue'

import InvestorNews from '@/components/client/investor/investorNews.vue'
import FinancialReports from '@/components/client/investor/financialReports.vue'
import InvestorToolkit from '@/components/client/investor/investorToolkit.vue'
import Governance from '@/components/client/investor/governance.vue'
import InvestorLive from '@/components/client/investor/investorLive.vue'

let data = reactive({
      componentList: [
            {
                  componentName: InvestorNews
            },
            {
                  componentName: FinancialReports
            },
            {
                  componentName: InvestorLive
            },
            {
                  componentName: InvestorToolkit
            },
            {
                  componentName: Governance
            }
      ]
})
</script>